<!--
 * @Description: 门户网站头部的组件
 * @Author: ZengYongxin
 * @Date: 2021-07-14 10:12:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 21:59:29
-->
<template>
  <div>
    <div class="Header">
      <div class="nav">
        <ul>
          <li>杭电首页</li>
          <li>加入收藏</li>
          <li>旧版网站</li>
        </ul>
      </div>
      <div class="left"><img src="/images/logo1.jpg" alt="" /></div>
      <div class="right"><img src="/images/top_logo.jpg" alt="" /></div>
      <div class="navBottom">
        <ul>
          <li v-for="(item, index) in navBottom" :key="index">
            <router-link :to="{ name: 'List', query: { id: item.id } }">{{
              item.name
            }}</router-link>
          </li>
        </ul>

        <!-- 模态框 -->
        <div class="m1" v-if="showFlag">
          <ul>
            <li>研究生教育概况</li>
            <li>院部领导</li>
            <li>机构设置</li>
            <li>岗位设置</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 时间、搜索框 -->
    <div class="time">
      <div class="time_left">
        <p>
          今天是:{{ timeData.year }}年{{ timeData.month + 1 }}月{{
            timeData.day
          }}日 {{ timeData.weeks }}
        </p>
      </div>
      <div class="time_right">
        站内搜索:<input type="text" /><img
          src="http://grs.hdu.edu.cn/_upload/tpl/00/41/65/template65/htmlRes/search_ok.jpg"
          alt=""
          @click="joke()"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '../../utils/request'
export default {
  data() {
    return {
      showFlag: false,
      timeData: {},
      navBottom: [],
      win: null,
    }
  },

  methods: {
    geTimeData() {
      let time = new Date()
      let year = time.getFullYear()
      let month = time.getMonth()
      let day = time.getDate()
      let week = time.getDay()
      const weekday = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ]
      let weeks = weekday[week]
      this.timeData.year = year
      this.timeData.month = month
      this.timeData.week = this.timeData.day = day
      this.timeData.weeks = weeks
    },

    // 模态框相关
    // 显示
    showWin(num) {
      this.showFlag = true
    },
    // 隐藏
    hideWin() {
      this.showFlag = false
    },

    // 动态生成模态框
    createWin() {
      this.win = `<li>研究生教育概况</li>
        <li>院部领导</li>
        <li>机构设置</li>
        <li>岗位设置</li>`
    },

    // 获取栏目数据
    getCategory() {
      let url = '/index/category/findAll'
      get(url).then((resp) => {
        this.navBottom = resp.data
      })
    },

    joke() {
      alert('别点了，没东西！')
    },
  },

  created() {
    this.getCategory()
    this.geTimeData()
  },
}
</script>



<style scoped>
* {
  margin: 0;
  padding: 0;
}

/* 头部 */
.Header {
  width: 100%;
  height: 203px;
  margin: 0 auto;
  position: relative;
}

.nav ul {
  position: absolute;
  right: 2em;
}
.nav ul li {
  width: 65px;
  height: 15px;
  float: left;
  text-align: center;
  line-height: 15px;
  border-right: 1px solid #000000;
  font-size: 12px;
  color: #000000;
  margin-top: 10px;
}

.nav ul li:last-child {
  border: none;
}

.left,
.right {
  width: 50%;
  height: 170px;
  float: left;
}
.left img {
  width: 100%;
  height: 170px;
}

.right img {
  width: 100%;
  height: 170px;
}
/* /头部 */

/* 蓝色的导航栏 */
.navBottom {
  width: 100%;
  height: 34px;
  position: absolute;
  background: linear-gradient(to bottom, #ccc, 1%, #2e88c4, #1870b8);
  top: 170px;
}

.navBottom ul {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 0;
}
.navBottom ul li {
  display: inline;
  width: 85px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  float: left;
}

.navBottom ul li a {
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  font-weight: bold;
}

/* /蓝色的导航栏 */

/* 导航栏下面的时间和输入框 */
.time {
  width: 100%;
  height: 35px;
  margin: 0 auto;
  display: flex;
}

.time_left,
.time_right {
  flex: 1;
  height: 35px;
  float: left;
  line-height: 35px;
  text-indent: 30px;
  font-size: 13px;
}
.time_left p {
  margin: 0;
  height: 35px;
}

.time_right {
  text-indent: 220px;
  height: 10px;
  margin: 0;
  position: relative;
}
.time_right img {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  position: absolute;
  top: 7px;
  cursor: pointer;
}

.time_right input {
  outline-color: #65aeea;
}

/* /导航栏下面的时间和输入框 */

/* 鼠标移入时弹出的模态框 */
.m1 {
  width: 350px;
  height: 35px;
  position: absolute;
  background: #b0c94b;
  margin-top: -35px;
  left: 380px;
}

/* 模态框 */
.m1 ul {
  width: 100%;
  display: flex;
}

.m1 ul li:first-child {
  flex: 1.5;
}
.m1 ul li {
  flex: 1;
  text-align: center;
  line-height: 35px;
  float: left;
  font-size: 13px;
}
.m1 ul li:hover {
  cursor: pointer;
  color: #ffffff;
}
/* /鼠标移入时弹出的模态框 */

/* 响应样式 */
.active {
  display: block;
}
</style>

</style>